<template>
  <div class="ant-list ant-list-split">
    <ul class="ant-list-items">
      <li class="ant-list-item">
        <div class="ant-list-item-meta">
          <div class="ant-list-item-meta-content">
            <h4 class="ant-list-item-meta-title">账户密码</h4>
            <div class="ant-list-item-meta-description">
              当前密码强度：<span class="strong">强</span>
            </div>
          </div>
        </div>
        <div class="ant-list-item-action">
          <el-button type="primary" link @click="pswdFormDialogVisible = true">修改</el-button>
          <el-dialog v-model="pswdFormDialogVisible" title="修改密码" width="600px">
            <div>
              <el-form ref="pswdFormRef" :model="pswdForm" :rules="pswdRules" label-position="top" label-width="120px"
                status-icon>
                <el-form-item label="账号" prop="username">
                  <el-input v-model="pswdForm.username" readonly />
                </el-form-item>
                <el-form-item label="当前密码" prop="password">
                  <el-input v-model="pswdForm.password" />
                </el-form-item>
                <el-form-item label="新密码" prop="newpassword1">
                  <Password-Input v-model="pswdForm.newpassword1" msg="使用8个及以上的大小写字母、数字和符号(至少包含两种类型)" />
                </el-form-item>
                <!-- <el-form-item label="新密码" prop="newpassword1">
                      <el-input v-model="pswdForm.newpassword1" />
                    </el-form-item> -->
                <el-form-item label="确认密码" prop="newpassword2">
                  <el-input v-model="pswdForm.newpassword2" />
                </el-form-item>
              </el-form>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="resetForm(pswdFormRef)">取消</el-button>
                <el-button type="primary" @click="submitPswdForm(pswdFormRef)">确认
                </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </li>
      <li class="ant-list-item">
        <div class="ant-list-item-meta">
          <div class="ant-list-item-meta-content">
            <h4 class="ant-list-item-meta-title">密保手机</h4>
            <div class="ant-list-item-meta-description">
              已绑定手机：<span class="strong">{{ user.phone }}</span>
            </div>
          </div>
        </div>
        <div class="ant-list-item-action">
          <el-button v-if="user.phone" type="primary" link @click="phoneFormDialogVisible = true">解绑/修改</el-button>
          <el-button v-else type="primary" link @click="phoneFormDialogVisible = true">绑定</el-button>
          <el-dialog v-model="phoneFormDialogVisible" title="绑定手机" width="600px">
            <div>
              <el-form ref="phoneFormRef" :model="phoneForm" :rules="phoneRules" label-position="top"
                label-width="120px" status-icon>
                <el-form-item label="当前手机号" prop="oldPhone">
                  <el-input v-model="phoneForm.oldPhone" readonly />
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                  <el-input v-model="phoneForm.phone" />
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                  <div class="w-full">
                    <el-row :gutter="20">
                      <el-col :span="18">
                        <el-input v-model="phoneForm.code" />
                      </el-col>
                      <el-col :span="6">
                        <el-button type="primary" class="w-full">发送验证码</el-button>
                      </el-col>
                    </el-row>
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="
                  resetForm(phoneFormRef);
                phoneFormDialogVisible = false;
                ">取消</el-button>
                <el-button type="primary" @click="submitPhoneForm(phoneFormRef)">确认
                </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </li>
      <li class="ant-list-item">
        <div class="ant-list-item-meta">
          <div class="ant-list-item-meta-content">
            <h4 class="ant-list-item-meta-title">备用邮箱</h4>
            <div class="ant-list-item-meta-description">
              已绑定邮箱：<span class="strong">{{ user.email }}</span>
            </div>
          </div>
        </div>
        <div class="ant-list-item-action">
          <el-button v-if="user.email" type="primary" link @click="emailFormDialogVisible = true">解绑/修改</el-button>
          <el-button v-else type="primary" link @click="emailFormDialogVisible = true">绑定</el-button>
          <el-dialog v-model="emailFormDialogVisible" title="绑定邮箱" width="600px">
            <div>
              <el-form ref="emailFormRef" :model="emailForm" :rules="emailRules" label-position="top"
                label-width="120px" status-icon>
                <el-form-item label="当前邮箱" prop="oldEmail">
                  <el-input v-model="emailForm.oldEmail" readonly />
                </el-form-item>
                <el-form-item label="新邮箱" prop="email">
                  <el-input v-model="emailForm.email" />
                </el-form-item>
                <el-form-item label="验证码" prop="code">
                  <div class="w-full">
                    <el-row :gutter="20">
                      <el-col :span="18">
                        <el-input v-model="emailForm.code" />
                      </el-col>
                      <el-col :span="6">
                        <el-button type="primary" class="w-full">发送验证码</el-button>
                      </el-col>
                    </el-row>
                  </div>
                </el-form-item>
              </el-form>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="
                  resetForm(emailFormRef);
                emailFormDialogVisible = false;
                ">取消</el-button>
                <el-button type="primary" @click="submitEmailForm(emailFormRef)">确认
                </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </li>

      <li class="ant-list-item">
        <div class="ant-list-item-meta">
          <div class="ant-list-item-meta-content">
            <h4 class="ant-list-item-meta-title">密保问题</h4>
            <div class="ant-list-item-meta-description">
              未设置密保问题，密保问题可有效保护账户安全
            </div>
          </div>
        </div>
        <div class="ant-list-item-action">
          <el-button type="primary" link @click="secretFormDialogVisible = true">设置</el-button>
          <el-dialog v-model="secretFormDialogVisible" title="设置密保" width="600px">
            <div>
              <el-form ref="secretFormRef" :model="secretForm" :rules="secretRules" label-position="top"
                label-width="120px" status-icon>
                <el-form-item label="问题一" prop="oneQuestion">
                  <el-select v-model="secretForm.oneQuestion" placeholder="请选择密保问题" class="w-full">
                    <el-option v-for="item in secretOptions" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-form-item>
                <el-form-item label="答案一" prop="oneAnswer">
                  <el-input v-model="secretForm.oneAnswer" />
                </el-form-item>
                <el-form-item label="问题二" prop="twoQuestion">
                  <el-select v-model="secretForm.twoQuestion" placeholder="请选择密保问题" class="w-full">
                    <el-option v-for="item in secretOptions" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-form-item>
                <el-form-item label="答案二" prop="twoAnswer">
                  <el-input v-model="secretForm.twoAnswer" />
                </el-form-item>
                <el-form-item label="问题三" prop="threeQuestion">
                  <el-select v-model="secretForm.threeQuestion" placeholder="请选择密保问题" class="w-full">
                    <el-option v-for="item in secretOptions" :key="item.value" :label="item.label"
                      :value="item.value" />
                  </el-select>
                </el-form-item>
                <el-form-item label="答案三" prop="threeAnswer">
                  <el-input v-model="secretForm.threeAnswer" />
                </el-form-item>
              </el-form>
            </div>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="
                  resetForm(secretFormRef);
                secretFormDialogVisible = false;
                ">取消</el-button>
                <el-button type="primary" @click="submitSecretForm(secretFormRef)">确认
                </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import rules from "@/utils/rules";
import PasswordInput from "@/components/sofastui/passwordInput/PasswordInput.vue";
// import { AuthStore } from "@/stores/modules/auth";

// const authStore = AuthStore();

const pswdFormDialogVisible = ref(false);
const phoneFormDialogVisible = ref(false);
const emailFormDialogVisible = ref(false);
const secretFormDialogVisible = ref(false);

const pswdFormRef = ref<FormInstance>();
const phoneFormRef = ref<FormInstance>();
const emailFormRef = ref<FormInstance>();
const secretFormRef = ref<FormInstance>();

const user = reactive<{
  email?: string;
  phone?: string;
}>({
  // ...authStore.user,
});

const pswdForm = reactive({
  username: "",
  password: "",
  newpassword1: "",
  newpassword2: "",
});
const phoneForm = reactive({
  oldPhone: "",
  phone: "",
  code: "",
});
const emailForm = reactive({
  oldEmail: "",
  email: "",
  code: "",
});
const secretForm = reactive({
  oneQuestion: "",
  oneAnswer: "",
  twoQuestion: "",
  twoAnswer: "",
  threeQuestion: "",
  threeAnswer: "",
});

const pswdRules = reactive<FormRules>({
  password: [rules.required()],
  // newpassword1: [rules.required(), rules.pswd()],
  // newpassword2: [rules.required(), rules.pswd()],
});
const phoneRules = reactive<FormRules>({
  oldPhone: [rules.required(), rules.mobile()],
  phone: [rules.required(), rules.mobile()],
  code: [rules.required(), rules.verificationCode()],
});
const emailRules = reactive<FormRules>({
  oldEmail: [rules.required(), rules.email()],
  email: [rules.required(), rules.email()],
  code: [rules.required(), rules.verificationCode()],
});
const secretRules = reactive<FormRules>({
  oneQuestion: [rules.required()],
  oneAnswer: [rules.required()],
  twoQuestion: [rules.required()],
  twoAnswer: [rules.required()],
  threeQuestion: [rules.required()],
  threeAnswer: [rules.required()],
});

const secretOptions = [
  {
    value: "1",
    label: "您目前的姓名是？",
  },
  {
    value: "2",
    label: "您配偶的生日是？",
  },
  {
    value: "3",
    label: "您的学号（或工号）是？",
  },
  {
    value: "4",
    label: "您母亲的生日是？",
  },
  {
    value: "5",
    label: "您高中班主任的名字是？",
  },
  {
    value: "6",
    label: "您父亲的姓名是？",
  },
  {
    value: "7",
    label: "您小学班主任的名字是？",
  },
  {
    value: "8",
    label: "您父亲的生日是？",
  },
  {
    value: "9",
    label: "您配偶的姓名是？",
  },
  {
    value: "10",
    label: "您初中班主任的名字是？",
  },
  {
    value: "11",
    label: "您最熟悉的童年好友名字是？",
  },
  {
    value: "12",
    label: "您最熟悉的学校宿舍舍友名字是？",
  },
  {
    value: "13",
    label: "对您影响最大的人名字是？",
  },
];
const saveLoading = ref(false);

// 修改密码
const submitPswdForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return;
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      console.log(fields);
      // editInfo(fields).then(() => {});
      saveLoading.value = true;
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 绑定手机
const submitPhoneForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return;
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      console.log(fields);
      // editInfo(fields).then(() => {});
      saveLoading.value = true;
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 绑定邮箱
const submitEmailForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return;
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      console.log(fields);
      // editInfo(fields).then(() => {});
      saveLoading.value = true;
    } else {
      console.log("error submit!", fields);
    }
  });
};
// 设置密保
const submitSecretForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return;
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      console.log(fields);
      // editInfo(fields).then(() => {});
      saveLoading.value = true;
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return;
  }
  formEl.resetFields();

  pswdFormDialogVisible.value = false;
  phoneFormDialogVisible.value = false;
  emailFormDialogVisible.value = false;
  secretFormDialogVisible.value = false;
};
</script>

<style lang="less" scoped>
.ant-list {
  width: 100%;
}

.ant-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  color: rgba(0, 0, 0, 0.85);
}

.ant-list-split .ant-list-item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* .ant-list-split .ant-list-item:last-child {
  border-bottom: none;
} */

.ant-list-item-meta {
  display: flex;
  flex: 1 1;
  align-items: flex-start;
  max-width: 100%;
}

.ant-list-item-meta-content {
  flex: 1 0;
  width: 0;
  color: rgba(0, 0, 0, 0.85);
}

.ant-list-item-action {
  flex: 0 0 auto;
  margin-left: 48px;
  padding: 0;
  font-size: 0;
  list-style: none;
}

.ant-list-item-meta-title {
  margin-bottom: 4px;
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  line-height: 1.5715;
}

.ant-list-item-meta-description {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 1.5715;
}
</style>
